<template>
	<view class="test">
		<chart :options="options" />
	</view>
</template>

<script>
	import Chart from '@/components/custom/chart/echart.vue';
	
	export default {
		components: {
			Chart
		},
		data() {
			return {
				options: {
					grid: {
					      left: '3%',
					      right: '4%',
					      bottom: '3%',
					      containLabel: true
					  },
					xAxis: {
					      type: 'category',
					      boundaryGap: false,
					      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					  },
					  yAxis: {
					      type: 'value'
					  },
					series: [
					  {
					      name: '邮件营销',
					      type: 'line',
					      stack: '总量',
					      data: [120, 132, 101, 134, 90, 230, 210],
					      markLine: {          // 标线
					        symbol: 'none',    // 标线两端的标记类型
					        animation: false,  // 是否开启动画
					        silent: true,      // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
					        data: [
					          {
					            lineStyle:{    // 标线样式
					              type:"solid",
					              color:"rgb(203 65 65)",
					              width: 2
					            },
					            xAxis: '周二'   // 标线的x值
					          }
					        ]
					      }
					  }
					]
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.test {
		width: 100%;
		height: 400rpx;
	}
</style>
